<template>
	<view>
		<view class='imagePathBox' v-if="maskHidden">
			<image src="/static/image/hongbao/close.png" class="close" @click="close"></image>
			<image :src="imagePath" class='shengcheng'></image>
			<!-- <image class="close" src="/images/icons/close.png" bindtap="hiddenPic"></image>  -->
			<image class='baocun' @click='baocun' src="/static/image/downLoad.png"></image>
		</view>
		<view v-if="maskHidden" class="mask" @click="close"></view>
		<view class="canvas-box">
			<canvas style="width: 690px;height:960px;position:fixed;top:9999px" canvas-id="mycanvas" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgurl: '',
				canvasShow: true,
				imagePath:'',
				leftIcon:'/static/image/giftleft.png',
				rightIcon:'/static/image/giftright.png',
				// shareCon:{
				// 	code: "https://baidi.wkbbjxt.com/uploads/code/h0xmkkyujeg3n701.png",
				// 	good_image: "https://lingxian2021.oss-cn-beijing.aliyuncs.com//uploads/20220301/d48defa52f067e19c4bf84fc2f0a19d5.png",
				// 	good_name: "测试1",
				// 	img: "https://lingxian2021.oss-cn-beijing.aliyuncs.com//uploads/20220321/d48defa52f067e19c4bf84fc2f0a19d5.png",
				// 	nickName: "Esther",
				// 	photo: "https://baidi.wkbbjxt.com//uploads/avatar/20220316/654e198286f5371dca221c218fde88f2.png",
				// 	word: "生日快乐呀"
				// }
			}
		},
		props:{
			maskHidden:{//提示文本内容
				type:Boolean,
				default(){
					return false
				}
			},
			shareCon:{
				type:Object,
				default(){
					return {}
				}
			},
			code:{
				type:String,
				default(){
					return ''
				}
			}
		},
		created(){
		},
		onHide() {
			//uni.removeStorageSync('person-card');
		},
		mounted() {
			console.log(this.shareCon)
			this.createNewImg()
			//如果本地有图片了，直接取，解决一些页面切换canvas没有重画
		},
		methods: {
			getImageInfo(url) {
				return new Promise((resolve, reject) => {
					wx.getImageInfo({
						src: url,
						success: resolve,
						fail: reject,
					})
				})
			},
			//圆角
			drawRoundRect(cxt, x, y, width, height, radius){   
			        cxt.beginPath();   
			        cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);   
			        cxt.lineTo(width - radius + x, y);   
			        cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);   
			        cxt.lineTo(width + x, height + y - radius);   
			        cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);   
			        cxt.lineTo(radius + x, height +y);   
			        cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);   
			        cxt.closePath(); 
			},
			close(){
				this.$emit("posterClose")
				
			},
			createNewImg: function() {
				var that = this;
				// 网络图
				
				let img = that.getImageInfo(that.shareCon.img);
				let code = that.getImageInfo(that.shareCon.code);
				let photo=that.getImageInfo(that.shareCon.photo);
				let good_image=that.getImageInfo(that.shareCon.good_image);
				// let img = that.data.shareCon.img;
				// let code= that.data.shareCon.QR_code;
				Promise.all([img, code,photo,good_image])
					.then(([img, code,photo,good_image]) => {
						console.log(img.width, img.height)
						
						var context = uni.createCanvasContext('mycanvas', this);
						context.draw();
						var img = img.path;
						var code = code.path;
						var photo=photo.path;
						var good_image=good_image.path;
						
						//context.drawImage('/images/common/shareBg.png',0,0,915,1623)
						//that.roundRect(context,0,0,735,1080,30)
						//外边框
						that.drawRoundRect(context, 0, 40, 690, 880, 20);
						context.save();
						context.clip();
						context.setFillStyle('#FFFFFF')
						context.fillRect(0, 40, 690, 880)
						context.drawImage(img, 0, 40, 690, 654);
						context.restore()
						//头像边框
						that.drawRoundRect(context,  298, 0, 86, 86, 43);
						context.save();
						context.clip();
						context.setFillStyle('#FFFFFF')
						context.fillRect(297, 0, 86, 86);
						context.restore();
						//头像
						that.drawRoundRect(context,  300, 3, 80, 80, 40);
						context.save();
						context.clip();
						context.drawImage(photo, 300, 3, 80, 80);
						context.restore();
						
						//好友昵称
						context.setFontSize(28);
						context.setFillStyle('#FFFFFF');
						context.textAlign="center";     
						context.fillText(that.shareCon.nickName, 345, 125)
						context.stroke();
						
						
						// 心愿
						context.drawImage(that.leftIcon, 65, 170, 11, 19)
						context.drawImage(that.rightIcon, 608, 260, 11, 19)
						context.stroke();
						context.restore();
						
						context.setFontSize(30);
						context.textAlign="left";
						context.setFillStyle('#FFFFFF');
						context.fillText(that.shareCon.word, 105, 210)
						context.stroke();
						
						//收到礼物
						context.lineWidth = 1;
						context.beginPath();
						context.moveTo(140,340);
						context.lineTo(260,340);
						context.closePath();
						context.fillStyle = '#FFFFFF';
						context.strokeStyle = '#FFFFFF';
						context.fill();
						context.stroke()

						context.lineWidth = 1;
						context.beginPath();
						context.moveTo(430,340);
						context.lineTo(550,340);
						context.closePath();
						context.fillStyle = '#FFFFFF';
						context.strokeStyle = '#FFFFFF';
						context.fill();
						context.setFontSize(28);
						context.fillText('收到的礼物', 275, 350);
						context.stroke()
						
						
						// 产品图片，名称
						that.drawRoundRect(context,  247, 422,206, 156,5);
						context.save();
						context.clip();
						context.setFillStyle('#FFFFFF')
						context.fillRect(247, 422, 206, 156);
						context.restore();
						
						that.drawRoundRect(context,  250, 425, 200, 150, 5);
						context.save();
						context.clip();
						console.log(good_image)
						context.drawImage(good_image, 250, 425, 200, 150);
						context.restore();
						
						context.setFontSize(28);
						context.setFillStyle('#FFFFFF');
						context.textAlign="center";
						var name = that.shareCon.good_name || '';
						console.log(name.length)
						for (var i = 0; i < name.length; i++){
						      if (context.measureText(name.substring(0,i+1)).width>340){ 
						        context.fillText(name.substring(0,i),345,620,340)
						        context.fillText(name.substring(i),345,650,340)
						        break
						      } else {
								 context.fillText(name, 345, 620,340);
								 
							  }
						    }
						context.stroke();
						
						//绘制code码
						context.drawImage(code, 530, 740, 130, 130)

						// 绘制标题
						// var name = that.shareCon.title || '';
						// console.log(name)
						// if (that.shareCon.title.length > 22) {
						// 	name = that.shareCon.title.substr(0, 22) + '…';
						// }
						var name1 = '长按识别二维码'
						var name2 = '进入小微普惠合同签署小程序'
						//绘制名字
						context.setFontSize(24);
						context.textAlign="left";  
						context.setFillStyle('#666666');
						//context.fillText(that.shareCon.name, 345, 120)
						//context.fillText(name, 30, 250);
						context.fillText(name1, 30, 780);
						context.setFontSize(28);
						context.fillText(name2, 30, 840);
						context.stroke();
						// that.roundRect(context,30,30,675,675,30)
						
						context.draw();
						//context.save();
						//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
						setTimeout(function() {
							uni.canvasToTempFilePath({
								canvasId: 'mycanvas',
								success: function(res) {
									var tempFilePath = res.tempFilePath;
									that.imagePath = tempFilePath,
									that.maskHidden = false
								},
								fail: function(res) {
									console.log(res);
								}
							}, that);
						}, 500);
					})

			},
			//点击保存到相册
			baocun: function() {
				var that = this
				uni.saveImageToPhotosAlbum({
					filePath: that.imagePath,
					success(res) {
						console.log(res)
						uni.showModal({
							content: '图片已保存到相册，赶紧晒一下吧~',
							showCancel: false,
							confirmText: '好的',
							confirmColor: '#333',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									/* 该隐藏的隐藏 */
									that.$emit("posterClose")
								}
							},
							fail: function(res) {
							}
						})
					},
					fail(err) {
						console.log(err)
						if (err.errMsg) { //重新授权弹框确认
							uni.showModal({
								title: '提示',
								content: '您好,请先授权，在保存此图片。',
								showCancel: false,
								success(res) {
									if (res.confirm) { //重新授权弹框用户点击了确定
										uni.openSetting({ //进入小程序授权设置页面
											success(settingdata) {
												console.log(settingdata)
												if (settingdata.authSetting[
														'scope.writePhotosAlbum'
													]) { //用户打开了保存图片授权开关
													uni.saveImageToPhotosAlbum({
														filePath: that.imagePath,
														success: function(data) {
															uni.showToast({
																title: '保存成功',
																icon: 'success',
																duration: 2000
															})
															that.$emit("posterClose")
														},
													})
												} else { //用户未打开保存图片到相册的授权开关
													uni.showModal({
														title: '温馨提示',
														content: '授权失败，请稍后重新获取',
														showCancel: false,
													})
												}
											}
										})
									} else {
										
									}
								},
								fail() {
									
								}
							})
						} else {
							
						}
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, 0.3);
	}

	.imagePathBox {
		position: fixed;
		width: 690rpx;
		height: 960rpx;
		top: 50%;
		margin-top:-480rpx;
		left: 30rpx;
		z-index: 1001;
	}

	.shengcheng {
		width: 100%;
		height: 960rpx;
		border-radius: 10rpx;
	}


	.baocun {
		display: block;
		width: 60rpx;
		height: 104rpx;
		//position: fixed;
		margin:0 auto;
		//top: 1050rpx;
		//left: 345rpx;
		z-index: 111;
	}

	.baocun image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 20rpx;
	}
	.close{
		//position: fixed;
		//right:30rpx;
		//top:200rpx;
		width:60rpx;
		height:60rpx;
		z-index: 111;
		float:right;
	}
</style>
